﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style>
        p {
            margin: 0;
            padding: 0;
        }

        *[title] {
            color: red;
        }

        .content {
            /*height: 1200px;*/
            width: 900%;
            border: 1px solid black;
            margin: 20px;
            padding: 0;
            background-color: antiquewhite;
            float: left;
        }

        .margpad {
            width: 80px;
            height: 80px;
            margin: 10px;
            padding: 10px;
            background-color: aqua;
            border-image-outset: 3px;
            border: 5px solid black;
        }

        .nonew {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: burlywood;
            border: 5px solid black;
        }

        .dwz {
            width: 600px;
            height: 600px;
            margin: 10px;
            background-color: greenyellow;
            border: 5px solid black;
        }

        .dwzs {
            width: 400px;
            height: 320px;
            margin: 10px;
            background-color: burlywood;
            border: 5px solid black;
        }

        .dw {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: burlywood;
            border: 5px solid black;
        }
        /*.dw[title]{
            color:red;
        }*/
        input[name='green'] {
            color: green;
        }

        input[name='red'] {
            color: red;
        }

        .f {
            background-color: gray;
            border: solid 1px black;
            max-width: 300px;
            min-height: 20px;
        }

        .fs {
            background-color: red;
            border: solid 1px groove;
            max-width: 300px;
            min-height: 20px;
        }

        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="content">
        <div>
            <script>
                debugger
                var http = require('http');

                http.createServer(function (request, response) {

                    // 发送 HTTP 头部 
                    // HTTP 状态值: 200 : OK
                    // 内容类型: text/plain
                    response.writeHead(200, { 'Content-Type': 'text/plain' });

                    // 发送响应数据 "Hello World"
                    response.end('Hello World\n');
                }).listen(8888);

                // 终端打印如下信息
                console.log('Server running at http://127.0.0.1:8888/');
            </script>
        </div>
        <div class="margpad">边框边距</div>
        <div class="nonew">无</div>
        <div class="dwz">
            <div class="dw">定位1</div>
            <div class="dw" style="position:relative;top:-20px;left:20px;">定位2</div>
            <div class="dw" style="position:absolute;top:20px;right:20px;">定位3</div>
            <div class="dw" style="position:fixed;top:120px;right:20px;">定位4</div>
            <div class="dwzs" style="position:relative">
                <div class="dw">定位5</div>
                <div class="dw">定位7</div>
                <div class="dw">定位8</div>
                <div class="dw" style="position:absolute;top:20px;right:20px;">定位6</div>
            </div>

        </div>
        <div class="f" @*style="float:left;"*@>

            <img src="~/Content/img/head.png" style="width:50px;height:50px;border: 1px solid red;float:left;" />
            <p style="border:1px solid green;float:left;word-break:break-all;word-wrap:break-word;">cxzczxcdasdcasdcdsaddddddddddddddddpdasdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
            <p style="border:1px solid yellow;float:left;word-break:break-all;word-wrap:break-word;">asd12222222222222222222222222222222222cxzc12222222222222222222222222222222222222222222p</p>
            @*<span>span</span>
                <span>span</span>*@
            <div title="sadasd" class="clear">按时大苏打</div>

        </div>
        <div class="dw" title="adsasdasd" @*style="float:left;"*@>
            dsadasdasd
            <input name="red" />
            <input name="green" />
        </div>
        <div>
            <div id="login">一登陆</div>
            <button onclick="dakai()">打开子窗口</button>
            <button onclick="gubi()">关闭子窗口</button>
            <button id="test">打开子窗口</button>
            <button id="test2">关闭子窗口</button>
        </div>

        <iframe id="external-frame" src="/home/JX_MH_ZSDT"></iframe>
        <script type="text/javascript">

            function setIframeHeight(iframe) {
                if (iframe) {
                    var p = iframe.contentWindow;
                    var t = iframe.contentDocument.parentWindow;
                    var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                    if (iframeWin.document.body) {
                        iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                        iframe.width = iframeWin.document.documentElement.scrollWidth || iframeWin.document.body.scrollWidth;
                    }
                }
            };

            window.onload = function () {
                setIframeHeight(document.getElementById('external-frame'));
                //var newWin = window.showModalDialog(url, window, 'dialogHeight:500px, dialogLeft:100px, dialogTop:100px,dialogWidth:300px, status:0, edge:sunken');
                //newWin.open();
                // var cea = window.showModalDialog('http://localhost:51452/CSS/Login', "dasd", '')
                // cea.open();

            };
            var sesa = null;
            function dakai() {
                sesa = open('http://localhost:51452/CSS/Login', '_blank', 'width=400,height=400,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=no,resizable=no')
            }
            function gubi() {
                debugger
                if (sesa) {
                    sesa.close();
                }

            }
            var opW = null;
            var opWLeft = (screen.width - 300) / 2;
            var opWTop = (screen.height - 300) / 2;
            document.getElementById("test").onclick = function () {
                opW = window.open('http://localhost:51452/CSS/Login', '_blank', 'width=400,height=400,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=no,resizable=no,left=' + opWLeft + ',top=' + opWTop)
            }
            document.getElementById("test2").onclick = function () {
                if (opW) {
                    opW.close();
                }
            }

        </script>
       
    </div>
</body>
</html>
